<template>
<div class="set-advertise-place">
    <div class="pop-name">设置</div>
    <div class="attributes">
        <div class="attribute place">
          <label class="name">推广位：</label>
            <el-select v-model="value2" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </div>
        <div class="attribute">
            <label class="name">可见性：</label>
            <el-switch
              v-model="value"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
        </div>
        <div class="attribute">
            <label class="name">备注：</label>
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="textarea">
            </el-input>
        </div>
        <div class="tips">*此处尺寸为图片尺寸</div>
    </div>
    <div class="tool-buttons">
        <el-button>取消</el-button>
        <el-button type="primary">确定</el-button>
    </div>
</div>
</template>  
<script>
export default{
    data() {
        return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    }
}
</script>   
<style scoped lang="scss">
.set-advertise-place{
    width:536px;
    padding:30px 30px 0;
    background:#fff;
    border-radius: 4px;
    .pop-name{
        font-size: 18px;
        color: #0F1B41;
        line-height: 18px;
    }
    .attributes{
        margin-top:35px;
        .attribute{
            margin-bottom:20px;
            display: inline-block;
            width:100%;
            &:after{
                display:block;
                content:'.';
                clear: both;
                font-size: 0;
            }
            .name{
                float:left;
                font-size: 14px;
                color: #5A7180;
                line-height: 36px;
            }
            .el-textarea{
              width:430px;
            }
        }
        .place{
            .el-select{
                width:177px;
            }
        }
    }
    .tool-buttons{
        margin-top:32px;
        padding:32px 0;
        clear: both;
        text-align: center;
        border-top:1px solid #eaeaea;
    }
}
</style>